<template>
  <div style="padding: 40px">


    <el-table :data="tableData" border stripe style="width: 100%;"  header-align="center" align="center">
      <el-table-column label="通知ID" width="70px"  header-align="center" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="studentName" label="学生姓名"  header-align="center" align="center"/>
      <el-table-column prop="courseName" label="课程名称"  header-align="center" align="center"/>
      <el-table-column prop="status" label="考勤状态"  header-align="center" align="center"/>
      <el-table-column prop="timestamp" label="考勤时间" :formatter="formatMeetingTime"  header-align="center" align="center"/>
      <el-table-column fixed="right" label="操作" width="120"  header-align="center" align="center" v-if="userRole === 'admin' ">
        <template #default="scope">

          <!-- 删除按钮 -->
          <el-popconfirm  v-if="userRole === 'admin' " title="这段内容确定删除吗?" @onConfirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getGuanKaoQinAll,
  getGuanKaoQinDeleteDaka, getStuKAll
} from '@/http/userList.js'
import moment from "moment";
import {getGuanliyuanQingAll, getStudenQianDaoAll} from "@/http/categories";

export default {
  name: "Notice",

  data() {
    return {
      form: {
       "studentName":"",
        "courseName":"",
        "status":"",
        "timestamp":""
      },

      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 10,
      total:0,
      tableData: [],

    }

  },
  created() {
    this.load()
  },

  methods: {
    formatMeetingTime(row) {
      return moment(row.timestamp).format('YYYY-MM-DD HH:mm:ss'); // 根据需要调整格式
    },


    async load() {
      let data = {} // 声明 data 变量

      if (this.userRole === 'admin') {
        const response = await getGuanKaoQinAll({ current: this.currentPage, size: this.pageSize})
        data = response.data
      } else if (this.userRole === 'student') {
        const response = await getStuKAll({current: this.currentPage, size: this.pageSize})
        data = response.data
      }

      console.log(data)
      this.tableData = data.records || []
      this.total = Number(data.total) || 0
    },
    async handleDelete(id) {
      console.log("id");
      const { code, message } = await getGuanKaoQinDeleteDaka({ id: id })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize ) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load()
    },
    async handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      const { code, message, data } = await getGuanKaoQinAll({ current: pageNum, size: this.pageSize })
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)
      this.load(); // 重新加载数据
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>
